<template>
  <div class="emoji-box">
    <ul class="emoji-wrap">
      <li
        v-for="(item, index) in emojiData"
        :key="index"
        class="emoji"
        @click="handleClick(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import { emojiData } from './emoji';
export default defineComponent({
  name: 'Emoticon',
  components: {},
  setup(props, { emit }) {
    const getEmoji: any = inject('getEmoji');
    const handleClick = (item: string) => {
      getEmoji(item);
    };
    return { emojiData, handleClick };
  },
});
</script>

<style scoped lang="scss">
.emoji-box {
  height: 275px;
  width: 400px;
  border-radius: 5px;
  .emoji-wrap {
    overflow: hidden;
    .emoji {
      float: left;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      font-size: 20px;
      -webkit-user-drag: none;
      img {
        transition: all 0.2s ease-in-out;
        width: 24px;
        height: 24px;
        -webkit-user-drag: none;
        pointer-events: none;
        user-select: none;
      }
      &:hover {
        background: #eee;
        img {
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>
